<template>
    <div>
      <h1>样式绑定：绑定class属性</h1>
      <!-- 动态绑定类名，根据 isRed 和 isGreen 的值来决定是否添加 red 和 green 类 -->
      <div :class="{ red: isRed, green: isGreen }">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto,
          voluptatum!
        </p>
      </div>
      <!-- 点击按钮切换 isRed 和 isGreen 的值 -->
      <button @click="handleClick">点击我</button>
      <div class="obj">
        <!-- 点击段落或按钮将其文本颜色设置为红色 -->
        <p @click="handleClick1">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto,
          voluptatum!
        </p>
        <button @click="handleClick1">点击我</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  
  // 定义响应式变量，控制元素的颜色样式
  const isRed = ref(true);
  const isGreen = ref(false);
  
  // 点击按钮切换 isRed 和 isGreen 的值
  const handleClick = () => {
    isRed.value = !isRed.value;
    isGreen.value = !isGreen.value;
  };
  
  // 点击元素将其文本颜色设置为红色
  const handleClick1 = (event) => {
    event.target.style.color = "red";
  };
  </script>
  
  <style scoped>
  .red {
    color: red;
  }
  .green {
    color: green;
  }
  .obj {
    color: rgb(0, 255, 76);
  }
  </style>